<template>
	<view>
		
		<view class="" v-if="iscopy"
			style="z-index: 99999; width: 600rpx;height:400rpx;background-color: #FFFFFF;box-sizing: border-box;position:fixed;left: 0;top: -50rpx;bottom: 0;right: 0;margin: auto;border-radius: 18rpx;">
			<view class="" style="margin-bottom: 100rpx;line-height: 50rpx;">
				<view class="" style="text-align: center;font-weight: bold;color: #6A6A6A;">
					{{$t('treaure.treasure1')}}
				</view>
				<view class="" style="text-align: center;font-weight: bold;color:#6A6A6A;">
					Successfully opened the treasure chest
				</view>
				<view class="" style="text-align: center; color: #E43D33;font-weight: bold;">
					{{$t('treaure.treasure3')}}:{{codeMoney}}

				</view>
			</view>
			<view class="" @click="copy"
				style="height: 80rpx;background-color:rgb(254,99,0);align: center;line-height: 80rpx;color:#F5F5F5;border-radius: 16rpx;margin: auto;width: 500rpx;text-align: center;">
				Check the balance
			</view>

		</view>
		<view class="back">

			<view class="flower" @click="open()">
				<!-- <view class="letter" style="text-align: center;padding-top:100rpx;">
					{{$t('treaure.treaurea')}}
				</view> -->
				<view class="" style="height: 800rpx;position: relative;padding-left: -10rpx;">
					<view class="letter" style="text-align: center;padding-top:100rpx;">
						{{$t('treaure.treaurea')}}
					</view>
					<view class="">
						<image src="../../static/treasure/-Bjfdsf(1).png" mode="" class="f"
							style="margin: auto;position: absolute;left: 0;right: 0;bottom: 0;top: 0;"></image>
					</view>
					<view class="treasure">
						<image src="../../static/treasure/box.png" mode="" class="t"
							style="position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;"></image>
					</view>
					<view class="letter2" style="margin-top: 500rpx;">
						{{$t('treaure.treaureb')}}
					</view>
				</view>

				<!-- <view class=""
					style="height: 100%;border: 1px dashed #000;display: table-cell; /*主要是这个属性*/ vertical-align: middle;text-align: center;">
					<image src="../../static/treasure/-Bjfdsf(1).png" mode="" class="f" style=""></image>
					<view class="treasure">
						<image src="../../static/treasure/box.png" mode="" class="t"></image>
					</view>
				</view>

 -->
				<!-- <view class="letter2">
					{{$t('treaure.treaureb')}}
				</view> -->
			</view>
			<view class="scroll">
				<view class="main">
					<view class="body">
						<maoScroll :data="data" :showNum="showNum" :lineHeight="lineHeight"
							:animationScroll="animationScroll" :animation="animation">
							<template v-slot="{line}">
								<view class="line" style="display: flex; justify-content: space-between;">
									<text>{{line.phone}}</text>
									<text>{{line.amount}}</text>

								</view>

							</template>
						</maoScroll>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	
	import maoScroll from '@/components/mao-scroll/mao-scroll.vue';
	
	import {
		treasurelist,
		gettreasure,
	} from '@/api/jogos.js';
	
	import {
		getInfo
	} from '@/api/login';
	
	import {
		mapGetters
	} from 'vuex'
	
	export default {
		
		components: {
			...mapGetters(['userInfo', 'token']),
			maoScroll
		},
		data() {
			return {
				iscopy: false,
				uid: 0,
				title: 'Hello',
				data: [],
				count: 30,
				showNum: 5,
				lineHeight: 60,
				animationScroll: 800,
				animation: 2000,
				codeMoney: '',
			}
		},
		onLoad() {
			let self = this;

			self.uid = uni.getStorageSync('uid')

			self.createData();
		},
		onShow: function() {
			// uni.setNavigationBarTitle({
			// 	title: this.$t('title.titlec'),
			// });

		},
		methods: {
			async createData() {
				uni.showLoading();
				let self = this
				let {
					code,
					data
				} = await treasurelist()
				if (code == 200) {
					
					uni.hideLoading();
				
					self.data = data
				}
			},
			// 点击跳转页面
			copy() {
				uni.navigateTo({
					url: '/pages/jogos/index',
				})
			},
			open() {
				// console.log(111)
				let self = this
				uni.showModal({
					title: self.$t('treaure.treaurec'),
					editable: true,
					confirmText: self.$t('treaure.treaured'),
					cancelText: self.$t('treaure.treauree'),
					success: async function(res) {
						if (res.confirm) {
							if (res.content) {
								uni.showLoading();
								let {
									code,
									data,
									msg
								} = await gettreasure()
								// 返回不存在的code码
								if (code == 200) {
									// console.log(JSON.stringify(data));
									uni.hideLoading();
									// console.log(resItem)
									self.codeMoney = data.money
									self.iscopy = true
								}else{
									uni.showModal({
										showCancel: false,
										content: msg,
										confirmText: self.$t('treaure.treaured'),
									})
								}

							} else {
								uni.showModal({
									showCancel: false,
									content: self.$t('treaure.treaurec'),
									confirmText: self.$t('treaure.treaured'),
								})
							}

						}
					},
				});
			}
		}
	}
</script>

<style lang="scss">
	.back {
		// width: 657rpx;
		height: 657rpx;
		padding-top: 10rpx;
		margin-top: 2rpx;
		// width: 750rpx;
		height: 1600rpx;
		background-image: url(../../static/treasure/-Bjfdsf.png);

		.flower {
			// position: relative;

			// margin-left: 55rpx;

			// .letter {
			// 	text-align: center;
			// 	position: absolute;
			// 	left: 130rpx;
			// 	top: 70rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			// 	line-height: 30rpx;
			text-shadow: 0rpx 4rpx 4rpx rgba(0, 0, 0, 0.89);
			-webkit-text-stroke: 2rpx #D1392B;
			text-stroke: 2rpx #D1392B;
			// }

			.letter2 {

				font-size: 36rpx;
				font-family: Comic Sans MS;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 30rpx;
				// position: absolute;
				// left: 175rpx;
				top: 580rpx;
				text-align: center;
			}

			@-webkit-keyframes rot {
				from {
					-webkit-transform: rotate(0deg);
				}

				to {
					-webkit-transform: rotate(360deg);
				}
			}

			.f {

				width: 800rpx;
				height: 800rpx;
				animation: rot 7s linear infinite;
			}

			.treasure {
				// // position: absolute;
				// top: 170rpx;
				// left: 155rpx;

				.t {
					width: 370rpx;
					height: 300rpx;
				}

			}


		}



	}

	.last {
		margin-top: 30rpx;

		.main {
			position: absolute;
			left: 10rpx;
			margin-left: 40rpx;
			margin-right: 40rpx;
			// width: 630rpx;
			height: 300rpx;
			margin: 30rpx;
			background-color: #FF6700;
			border-radius: 16rpx;
			border: 1px solid #FF6700;
		}


	}


	.main .subject {
		height: 80rpx;
		font-size: 36rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
	}

	.main .body {
		margin-top: 50rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding: 20rpx;
		background-color: #FFFFFF;
		// width: 630rpx;
		height: 300rpx;
		background: #FFFFFF;
		border: 10rpx solid #F3BA45;
		border-radius: 10rpx;
	}

	.main .body .line {
		height: 60rpx;
		line-height: 60rpx;
	}
</style>